﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>贵州新能源检测平台（第一套）</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<script type="text/javascript">
	$(document).ready(function(){ //整个html加载后执行这段代码
		var html=$(".wrap ul").html()
		$(".wrap ul").append(html)
		var ls=$(".wrap li").length/2+1
		i=0
		ref = setInterval(function(){
			i++
			if(i==ls){
				i=1
				$(".wrap ul").css({marginTop:0})
				$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
			}
	    	$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)


		},2400); //每间隔2.4秒就执行一边代码



				var html2=$(".adduser ul").html()
		$(".adduser ul").append(html2)
		var ls2=$(".adduser li").length/2+1
		a=0
		ref = setInterval(function(){
			a++
			if(a==ls2){
				a=1
				$(".adduser ul").css({marginTop:0})
				$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
			}
	    	$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)


		},4300);
	})
</script>
<body>
    <div class="loading">
        <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
      <h1>贵州能源电力调度新能源发电功率预测系统</h1>
      <div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>
    	
    	<script>
    	var t = null;
        t = setTimeout(time,1000);//開始运行
        function time()
        {
           clearTimeout(t);//清除定时器
           dt = new Date();
    		var y=dt.getFullYear();
    		
    		var mt=dt.getMonth()+1;
    		var day=dt.getDate();
           var h=dt.getHours();//获取时
           var m=dt.getMinutes();//获取分
           var s=dt.getSeconds();//获取秒
           document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
           t = setTimeout(time,1000); //设定定时器，循环运行     
        } 
    
    	</script>
    	
    	
    </div>
    <div class="mainbox">
		<!-- 气象预警 -->
        <div class="warningbox" style="height:.6rem">
            <div class="warning">气象预警：<span class="warningtxt">由于强降水范围加大，强度增加，贵州气象台于9月24日06时发布暴雨蓝色预警。部分地区伴有短时强降水（最大小时降雨量20～40毫米，局地可超过50毫米），局地有雷暴大风等强对流天气。
            </span>
			</div>
        </div>
        <ul class="clearfix">
            <li>
                <!-- <div class="boxall" style="height: 2.7rem">
                    <div class="alltitle">发电参数</div>
                    <div class="sycm">
                        <ul class="clearfix">
                            <li><h2>1824</h2><span>总装机容量</span></li>
                            <li><h2>1920</h2><span>光伏电站个数</span></li>
                            <li><h2>19</h2><span>风电场个数</span></li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix">
                            <li><h2>1824</h2><span>风速</span></li>
                            <li><h2>1920</h2><span>湿度</span></li>
                            <li><h2>19</h2><span>环境温度</span></li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div> -->
				<div class="boxall" style="height: 2.65rem">
				    <div class="alltitle">电站占比</div>
				    <div class="sy" id="echarts1"></div>
				    <div class="sy" id="echarts2"></div>
				    <div class="sy" id="echarts3"></div>
				    <div class="boxfoot"></div>
				</div>
                <div class="boxall" style="height:5.2rem">
                    <div class="alltitle">风力电站信息</div>
                    <div class="tabs">
                        <ul class="clearfix">
                            <li><a class="active" href="#">年</a></li>
                            <li><a href="#">月</a></li>
                            <li><a href="#">日</a></li>
                        </ul>
                    </div>
                    <div class="sycm">
                        <ul class="clearfix">
                            <li><h2>1.9 m/s</h2><span>平均风速</span></li>
                            <li><h2>18.6 c</h2><span>平均温度</span></li>
                            <li><h2>70 %</h2><span>平均湿度</span></li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix">
                            <li><h2>10 h</h2><span>日照时数</span></li>
                            <li><h2>156.8 m/s</h2><span>轮毂风速</span></li>
                            <li><h2>86.8 Pa</h2><span>气压</span></li>
                        </ul>
                    </div>
                    <!-- <div class="clearfix">
                        <div class="sy" id="echarts6"></div>
                        <div class="sy" id="echarts7"></div>
                        <div class="sy" id="echarts8"></div>
                    </div> -->
					//
                    <div class="addnew">
                        <div class="tit02"><span>今日电站状态列表</span></div>
                        <div class="adduser">
                            <ul class="clearfix">
                                <li class="clearfix"> <span class="pulll_left"><!-- <img src="images/head.jpg"> -->1号风电发电站</span><span class="pulll_right">发电量：4000KWh</span> </li>
                                <li class="clearfix"> <span class="pulll_left"><!-- <img src="images/head.jpg"> -->2号风电发电站</span><span class="pulll_right">发电量: 8000KWh </span> </li>
                                <li class="clearfix"> <span class="pulll_left"><!-- <img src="images/head.jpg"> -->3号风电发电站</span><span class="pulll_right">发电量: 9000KWh</span> </li>
                                <li class="clearfix"> <span class="pulll_left"><!-- <img src="images/head.jpg"> -->4号风电发电站</span><span class="pulll_right">发电量: 5000KWh</span> </li>
                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                
                <!-- <div class="boxall" style="height: 2.95rem">
                    <div class="alltitle">行业用电占比</div>
                    <div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
                    <div class="boxfoot"></div>
                </div> -->
            </li>
            <li>
				<!-- 缺单位 -->
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter">1254548</li>
                            <li class="pulll_left counter">3914562</li>
                        </ul>
                    </div>
                <!--    <div  class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left"><img src="images/pin blue.png"></li>
                            <li class="pulll_left"><img src="images/pin yellow.png"></li>
                        </ul>
                    </div> -->
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left"><img src="images/blue.png">风电总量（瓦）</li>
                            <li class="pulll_left"><img src="images/yellow.png">光伏总量（瓦）</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src="images/lbx.png"></div>
                    <div class="map2"><img src="images/jt.png"></div>
                    <div class="map3"><img src="images/map.png"></div>
                    <div class="map4" id="chart_guizhou"></div>
                </div>
            </li>
            <li>
				<!-- 发电占比 -->
				<div class="boxall" style="height: 2.65rem">
				    <div class="alltitle">发电占比</div>
				    <div class="sy" id="echarts6"></div>
				    <div class="sy" id="echarts7"></div>
				    <div class="sy" id="echarts8"></div>
				    <div class="boxfoot"></div>
				</div>
                <div class="boxall" style="height:5.2rem">
                    <div class="alltitle">光伏电站信息</div>
                    <div class="tabs">
                        <ul class="clearfix">
                            <li><a class="active" href="#">年</a></li>
                            <li><a href="#">月</a></li>
                            <li><a href="#">日</a></li>
                        </ul>
                    </div>
                    <div class="sycm">
                        <ul class="clearfix">
                            <li><h2>5 m/s</h2><span>平均风速</span></li>
                            <li><h2>22 ℃</h2><span>平均温度</span></li>
                            <li><h2>50 %</h2><span>平均湿度</span></li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix">
                            <li><h2>10 h</h2><span>日照时数</span></li>
                            <li><h2>39380.7 kwh/m</h2><span>水平面总辐射量</span></li>
                            <li><h2>60991.1 kwh/m</h2><span>倾斜面总辐射量</span></li>
                        </ul>
                    </div>
                    <!-- <div class="clearfix">
                        <div class="sy" id="echarts6"></div>
                        <div class="sy" id="echarts7"></div>
                        <div class="sy" id="echarts8"></div>
                    </div> -->
					
					<!-- 发电计划表 -->
                    <div class="addnew">
                        <div class="tit02"><span>发电计划</span></div>
                        <div class="wrap">
                            <ul class="clearfix">
                                <li class="clearfix"> <span class="pulll_left"><!-- <img src="images/head.jpg"> -->光伏1号发电站</span> <span class="pulll_right">停机</span> </li>
                                <li class="clearfix"> <span class="pulll_left"><!-- <img src="images/head.jpg"> -->风力2号发电站</span> <span class="pulll_right">开启</span> </li>
                                <li class="clearfix"> <span class="pulll_left"><!-- <img src="images/head.jpg"> -->光伏3号发电站</span> <span class="pulll_right">停机</span> </li>
                                <li class="clearfix"> <span class="pulll_left"><!-- <img src="images/head.jpg"> -->风力4号发电站</span> <span class="pulll_right">开启</span> </li>
                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                
                <!-- <div class="boxall" style="height: 3.4rem">
                    <div class="alltitle">电站发电记录</div>
                    <div class="wrap">
                        <ul>
                            <li>
                                <p>1号光伏发电站-7327367w</p>
                            </li>
                            <li>
                                <p>2号光伏发电站-7327367w</p>
                            </li>
                            <li>
                                <p>3号光伏发电站-7327367w</p>
                            </li>
                            <li>
                                <p>4号光伏发电站-7327367w</p>
                            </li>
                            <li>
                                <p>5号光伏发电站-7327367w</p>
                            </li>
                            <li>
                                <p>6号光伏发电站-7327367w</p>
                            </li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div> -->
            </li>
        </ul>
    </div>
    <div class="back"></div>
    <script language="JavaScript" src="js/js.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/area_echarts.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
        })
        window.addEventListener("resize", function () {
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
        });
    </script>
    <script type="text/javascript">
        var v0 = 1000;
        var v1 = 353;
        var v2 = 178;
        var v3 = 68;



        var myChart6 = echarts.init(document.getElementById('echarts6'));
        option6 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '新增会员',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                       {
                           value: v0,
                           name: '老会员',
                           label: {
                               normal: {
                                   formatter: function (params) {
                                       return '占比' + Math.round(v1 / v0 * 100) + '%'
                                   },
                                   textStyle: {
                                       color: '#aaa',
                                       fontSize: 12
                                   }
                               }
                           },
                           itemStyle: {
                               normal: {
                                   color: 'rgba(255,255,255,.2)'
                               },
                               emphasis: {
                                   color: '#fff'
                               }
                           },
                       }]
            }]

        };

        var myChart7 = echarts.init(document.getElementById('echarts7'));
        option7 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '新增领卡会员',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                       {
                           value: v0,
                           name: '总领卡会员',
                           label: {
                               normal: {
                                   formatter: function (params) {
                                       return '占比' + Math.round(v2 / v0 * 100) + '%'
                                   },
                                   textStyle: {
                                       color: '#aaa',
                                       fontSize: 12
                                   }
                               }
                           },
                           itemStyle: {
                               normal: {
                                   color: 'rgba(255,255,255,.2)'
                               },
                               emphasis: {
                                   color: '#fff'
                               }
                           },
                       }]
            }]
        };


        var myChart8 = echarts.init(document.getElementById('echarts8'));
        option8 = {


            series: [{

                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v3,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: v3 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v0,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v2 / v0 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function () {
            myChart6.setOption(option6);
            myChart7.setOption(option7);
            myChart8.setOption(option8);
        }, 500);

    </script>
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('echarts1'));
        var v1 = 298;
        var v2 = 50;
        var v3 = v1 + v2;
        option1 = {

      
            series: [{
				//饼状图
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                }, 
				// data表示当前的数据,
                data: [{
                    value: v1,
                    name: '风电',
                    label: {
                        normal: {
                            formatter: v3 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },{
                    value: v2,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v1 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };


        var myChart3 = echarts.init(document.getElementById('echarts3'));
        var v1 = 298 
        var v2 = 523 
        var v3 = v1 + v2 
        option2 = {

       
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v2,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v1 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };


        var myChart2 = echarts.init(document.getElementById('echarts2'));
        option3 = {


            series: [{

                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v1,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v2 / v3 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function () {
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            myChart3.setOption(option3);
        }, 500);

    </script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('echarts4'));
        var plantCap = [{
            name: '工业',
            value: '222'
        }, {
            name: '农业',
            value: '115'
        }, {
            name: '互联网',
            value: '113'
        }, {
            name: '医疗',
            value: '95'
        }, {
            name: '文学',
            value: '92'
        }, {
            name: '服装',
            value: '87'
        }];
        var datalist = [{
            offset: [56, 48],
            symbolSize: 110,
   
            color: 'rgba(73,188,247,.14)',

        }, {

            offset: [30, 70],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [0, 43],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'

        }, {
            offset: [93, 30],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [26, 19],
            symbolSize: 65,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [75, 75],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'

        }];

        var datas = [];
        for (var i = 0; i < plantCap.length; i++) {
            var item = plantCap[i];
            var itemToStyle = datalist[i];
            datas.push({
                name: item.value + '\n' + item.name,
                value: itemToStyle.offset,
                symbolSize: itemToStyle.symbolSize,
                label: {
                    normal: {
                        textStyle: {
                            fontSize: 14
                        }
                    }
                },

                itemStyle: {
                    normal: {
                        color: itemToStyle.color,
                        opacity: itemToStyle.opacity
                    }
                },
            })
        }
        option = {
            grid: {
                show: false,
                top: 10,
                bottom: 10
            },

            xAxis: [{
                gridIndex: 0,
                type: 'value',
                show: false,
                min: 0,
                max: 100,
                nameLocation: 'middle',
                nameGap: 5
            }],

            yAxis: [{
                gridIndex: 0,
                min: 0,
                show: false,
                max: 100,
                nameLocation: 'middle',
                nameGap: 30
            }],
            series: [{
                type: 'scatter',
                symbol: 'circle',
                symbolSize: 120,
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}',
                        color: '#FFF',
                        textStyle: {
                            fontSize: '30'
                        }
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#F30'
                    }
                },
                data: datas
            }]

        };
        myChart.setOption(option);
        $(document).ready(function () {
            myChart.resize();

        })
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
	
    <script type="text/javascript">
        $('.counter').countUp();
    </script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/guiZhou.js"></script>
	<script type="text/javascript" src="js/charts_guiZhou.js"></script>

</body>
</html>
